import { useState } from "react"
import * as echarts from '../../../../../assets/ec-canvas/echarts.js';
export default () => {
    
    let [ec, setec] = useState({
        ec : {
            onInit (canvas, width, height) {
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
                  });
                  canvas.setChart(chart);
                
                  var option = {
                    title: {
                      text: '测试下面legend的红色区域不应被裁剪',
                      left: 'center'
                    },
                    legend: {
                      data: ['A', 'B', 'C'],
                      top: 50,
                      left: 'center',
                      backgroundColor: 'red',
                      z: 100
                    },
                    grid: {
                      containLabel: true
                    },
                    tooltip: {
                      show: true,
                      trigger: 'axis'
                    },
                    xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                      // show: false
                    },
                    yAxis: {
                      x: 'center',
                      type: 'value',
                      splitLine: {
                        lineStyle: {
                          type: 'dashed'
                        }
                      }
                      // show: false
                    },
                    series: [{
                      name: 'A',
                      type: 'line',
                      smooth: true,
                      data: [18, 36, 65, 30, 78, 40, 33]
                    }, {
                      name: 'B',
                      type: 'line',
                      smooth: true,
                      data: [12, 50, 51, 35, 70, 30, 20]
                    }, {
                      name: 'C',
                      type: 'line',
                      smooth: true,
                      data: [10, 30, 31, 50, 40, 20, 10]
                    }]
                  };
                
                  chart.setOption(option);
                  return chart;
            }
        }
    })

    return <>
        <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={ec} />
    </>
}